<template>
  <div>
    <el-form ref="formSearch" :model="formSearch" label-width="100px" size="small" :inline="true">
        <el-col :span='14'>
            <el-form-item>
                <el-upload :action="actionUrl" :data="{projectListId: this.projectId}" :headers="uploadHeaders" name="file" :show-file-list="false" :limit='1' accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,"
                                :on-success="uploadSuccess" :on-error="uploadError">
                        <el-button size="small" type="primary">上传</el-button>
                        <span slot="tip" class="el-upload__tip">支持格式 doc、docx、xls、xlsx、ppt、pptx、pdf、txt</span>
                    </el-upload>
            </el-form-item>
        </el-col>
         <el-col :span='8' :offset="2" align='right'>
            <el-form-item>
                <el-input v-model="formSearch.name" placeholder="请输入资料名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
            </el-form-item>
        </el-col>
    </el-form>
    <!-- 表格 -->
    <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @current-change='currentChange' @size-change="sizeChange">
        <template slot-scope="scope" slot="menu">
            <el-button type="primary" size="small"  plain @click.stop="handlePreview(scope.row,scope.index)">预览</el-button>
            <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
            <a class="el-button el-button--primary el-button--small is-plain" @click="handleDownload(scope.row,scope.index)"
               :href="axiosUrl +'/projectData/v1/auth/getFileNameUrl?getFileNameUrl='+scope.row.url+'&id='+scope.row.id" download="下载">下载</a>
        </template>
    </avue-crud>
  </div>
</template>

<script>
import { infoTableOption } from "@/const-personal/ledger/projectLedger.js"
import { getProjectData,addProjectData,downloadProjectData,delProjectData ,previewProjectData} from "@/api/ledger/progect"
import website from '@/const/website';
import { getToken } from '@/util/auth'
import { getStore } from '@/util/store'
export default {
    name: "项目资料",
    data() {
        return {
            projectId: getStore({ name: 'projectId'}),
            formSearch:{
                name:''
            },
            tableOption:infoTableOption,
            page: {
                total: 10, //总页数
                currentPage: 1, //当前页数
                pageSize: 20, //每页显示多少条
                pageSizes: [5,10,20]
            },
            tableLoading: false,
            tableData:[],//数据
            // 上传文件
            actionUrl: website.axiosUrl + '/projectData/v1/insert/upload',
            axiosUrl: website.axiosUrl,
            uploadHeaders: {
                Authorization: getToken()
            },
        }
    },
    mounted(){
        this.searchFormSubmit()
    },
    methods: {
        // 预览
        handlePreview(row,index){
            const href =  website.axiosUrl +row.url+"?id="+row.id
            window.open(href, '_blank')
            previewProjectData(row.id).then(res =>{
                if(res.data.code==200) {
                    this.searchFormSubmit()
                }
            })
        },
        // 下载
        handleDownload(row,index){
            this.tableData[index].downloadNumber += 1;
        },
        // 删除
        handleDelete(row,index){
            this.$confirm('是否将该资料（'+row.fileOldName+'）从项目资料中删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delProjectData(row.id).then(res =>{
                    if(res.data.code==200){
                        this.$notify({ title: '操作成功', type: 'success', message: '已成功删除该项目资料!'});
                        this.searchFormSubmit();
                    } else {
                        this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                    }
                })
            }).catch(() => {
                this.$notify({ title: '已取消删除', type: 'info', });
            });
        },
        //上传
        handleUpload(){},
        // 搜索
        searchFormSubmit() {
            let data = { fileOldName: this.formSearch.name,
                projectListId: this.projectId}
            data.page = this.page.currentPage;
            data.size = this.page.pageSize;
            getProjectData(data).then(res =>{
                if(res.data.code==200){
                    this.tableData = res.data.data.list;
                    this.page.total = res.data.data.total;
                    this.page.currentPage = res.data.data.pageNum;
                    this.page.pageSize = res.data.data.pageSize;
                } else {
                    this.$notify.error({ title: '查询失败', message: '获取项目资料失败！', type: 'danger', });
                }
            })
        },
         // 分页
        currentChange(page){
            this.page.currentPage = page;
            this.searchFormSubmit();
        },
        //分页大小
        sizeChange(val){
            this.page.pageSize = val;
            this.searchFormSubmit();
        },
        // 文件上传成功
        uploadSuccess(response, file) {
            if (response.code === 200) {
                this.$notify({ title: '上传成功', type: 'success', message: '已成功上传项目资料!'});
                this.searchFormSubmit()
            } else {
                this.$notify.error({ title: '上传失败', message: '上传项目资料失败！', type: 'danger', });
            }
        },
        // 文件上传失败
        uploadError(err, file) {
            this.$notify.error({ title: '上传失败', message: '上传项目资料失败！', type: 'danger', });
        }
    }
};
</script>

<style scoped>
.el-upload__tip{
    margin-left: 10px;
    vertical-align: text-top
}
</style>